<template>
  <div class="content">
    <h1>我的订单</h1>
    <div class="box_info_dd">
      <el-tabs v-model="activeName"  v-loading="loading">
        <el-tab-pane label="全部有效订单" name="4">
          <el-switch
            style="display: block"
            v-model="order_type"
            active-color="#13ce66"
            inactive-color="#007ACC"
            active-text="图书订单"
            inactive-text="充值订单"
          >
          </el-switch>
          <div class="tab_box" v-show="statusnum < 1">
            <p class="noMesInfo" v-show="true">暂无数据</p>
          </div>

          <div class="tab_box" >
            <el-scrollbar
              style="height:500px;width:1060px"
            
            >
              <div
                class="order_list"
                v-for="item in orderlist"
                :key="item.orderId"
                v-show="order_type == false"
              >
                <div
                  class="order_summary"
                 
                >
                  <span class="order_status">{{
                    item.status == 3
                      ? "已完成"
                      :  "待支付"
                  }}</span>
                  
                  <span>
                    <button
                      @click="kefu(item.orderId)"
                      v-if="
                       
                           item.status == 3
                      "
                      class="plainBtn"
                    >
                      联系客服
                    </button>
                    <button
                      v-else-if="
                       
                          item.status != 3
                      "
                      class="plainBtn"
                      @click="pay(item.orderId, 2)"
                    >
                      立即支付
                    </button>
                  </span>
                  <p class="caption-info">
                    {{ item.createTime }}
                    <span>|</span>
                    {{ item.receiveName }}
                    <span>|</span>
                    订单编号:{{ item.orderId }}

                    <span style="float: right"
                      >实付金额：
                      <span class="money">{{
                        item.payment
                      }}</span
                      >元</span
                    >
                  </p>
                </div>
            
              </div>
              <div
                class="order_list"
                v-for="item in orderlist2"
                :key="item[1].orderId"
                v-show="order_type == true"
              >
                <div
                  class="order_summary"
                  style="
                    border-bottom: 1px solid #e7e7e7;
                  "
                >
                  <span
                    class="order_status"
                    v-if="item[1].orderStatus == 0"
                    >待支付</span
                  >
                  <span
                    class="order_status"
                    v-else-if="item[1].orderStatus == 1"
                    >待发货</span
                  >
                  <span
                    class="order_status"
                    v-else-if="item[1].orderStatus == 2"
                    >待收货</span
                  >
                  <span
                    class="order_status"
                    v-else-if="item[1].orderStatus== 3"
                    >已完成</span
                  >
                  <span
                    class="order_status"
                    v-else-if="item[1].orderStatus== -1"
                    >已取消</span
                  >
                
                  <p class="caption-info">
                    {{ item[1].createTime }}
                    <span>|</span>
                    {{ item[1].receiveName }}
                    <span>|</span>
                    订单编号:{{ item[1].orderId }}

                    <span style="float: right"
                      >实付金额：
                      <span class="money">{{
                        item[1].payment
                      }}</span
                      >元</span
                    >
                  </p>
                </div>
                <div class="bookInfo" >
                  <div
                    class="book_item"
                    v-for="i in item[0].slice(0,7)"
                    :key="i.orderId"
                  >
                    <el-image
                      class="bookImg"
                      :src=" i.bookImg"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book_action">
                    <button
                      @click="goToOrderDetail(item[1].orderId)"
                      class="plainBtn"
                    >
                      订单详情
                    </button>
                    <br />
                    <button
                      @click="pj(item[1].orderId)"
                      v-if="
                       
                         item[1].orderStatus == 3
                      "
                      class="plainBtn"
                    >
                      评价
                    </button>
                    <button
                      v-else-if="
                     item[1].orderStatus == 1
                      "
                      class="plainBtn"
                    >
                      催发货
                    </button>
                    <button
                      @click="queren(item[item.length - 1].orderId)"
                      v-else-if="
                      item[1].orderStatus == 2
                      "
                      class="plainBtn"
                    >
                      确定收货
                    </button>
                     <button
                      @click="queren(item[item.length - 1].orderId)"
                      v-else-if="
                      item[1].orderStatus == -1
                      "
                      class="plainBtn"
                    >
                      重新下单
                    </button>
                    <button
                      v-else-if="
                     item[1].orderStatus == 0
                      "
                      class="plainBtn"
                      @click="pay(item[1].orderId, 1)"
                    >
                      立即支付
                    </button>
                    <br />
                    <button
                      @click="kefu(item[1].orderId)"
                      class="plainBtn"
                    >
                      联系客服
                    </button>
                    <br />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="0">
          <el-switch
            style="display: block"
            v-model="order_type"
            active-color="#13ce66"
            inactive-color="#007ACC"
            active-text="图书订单"
            inactive-text="充值订单"
          >
          </el-switch>
          <div class="tab_box" v-show="statusnum < 1">
            <p class="noMesInfo" v-show="true">暂无待支付订单</p>
          </div>
          <el-scrollbar
            style="height:500px;width:1060px"
         
          >
            <div
              class="order_list"
              v-for="item in orderlist"
              :key="item.orderId"
              v-show="order_type == false"
            >
              <div class="order_summary">
                <span class="order_status">待支付</span>
                <span style="float: right">
                  <button class="plainBtn" @click="pay(item.orderId, 2)">
                    立即支付
                  </button></span
                >
                <p class="caption-info">
                  {{ item.createTime }}
                  <span>|</span>
                  {{ item.receiveName }}
                  <span>|</span>
                  订单编号:{{ item.orderId }}

                  <span style="float: right"
                    >实付金额： <span class="money">{{ item.payment }}</span
                    >元</span
                  >
                </p>
              </div>
            </div>
            <div
              class="order_list"
              v-for="item in orderlist2"
              :key="item[1].orderId"
              v-show="order_type == true"
            >
              <div
                class="order_summary"
                style="
                 border-bottom: 1px solid #e7e7e7;
                "
              >
                <span class="order_status">待支付</span>

                <p class="caption-info">
                  {{ item[1].createTime }}
                  <span>|</span>
                  {{ item[1].receiveName }}
                  <span>|</span>
                  订单编号:{{ item[1].orderId }}

                  <span style="float: right"
                    >实付金额： <span class="money">{{ item[1].payment }}</span
                    >元</span
                  >
                </p>
              </div>
              <div class="bookInfo">
                <!-- <div
                  class="book_item"
                  v-for="i in item[0]"
                  :key="i.orderId"
                >
                  <el-image
                    class="bookImg"
                    :src=" i.bookImg"
                    fit="fill"
                  ></el-image>
                </div> -->
                <div class="book_action">
                  <button
                    class="plainBtn"
                    @click="goToOrderDetail(item[1].orderId)"
                  >
                    订单详情
                  </button>
                  <br />
                  <button
                    class="plainBtn"
                    v-if="item[1].orderStatus == 0"
                    @click="pay(item[1].orderId, 1)"
                  >
                    立即支付
                  </button>
                  <button class="plainBtn" v-else-if="item[1].orderStatus == 1">
                    确定收货
                  </button>
                  <br />
                  <button @click="kefu" class="plainBtn">联系客服</button>
                  <br />
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="待发货" name="1">
          <div class="tab_box" v-show="statusnum< 1">
            <p class="noMesInfo" v-show="true">暂无待发货订单</p>
          </div>
          <el-scrollbar
            style="height:500px;width:1060px"
           
          >
            <div
              class="order_list"
              v-for="item in orderlist2"
              :key="item[1].orderId"
            >
              <div
                class="order_summary"
                style="
                  border-bottom: 1px solid #e7e7e7;
                "
              >
                <span class="order_status">待发货</span>

                <p class="caption-info">
                  {{ item[1].createTime }}
                  <span>|</span>
                  {{ item[1].receiveName }}
                  <span>|</span>
                  订单编号:{{ item[1].orderId }}

                  <span style="float: right"
                    >实付金额： <span class="money">{{ item[1].payment }}</span
                    >元</span
                  >
                </p>
              </div>
              <div class="bookInfo" v-if="item.length > 1">
                <div
                  class="book_item"
                  v-for="i in item[0]"
                  :key="i.orderId"
                >
                  <el-image
                    class="bookImg"
                    :src=" i.bookImg"
                    fit="fill"
                  ></el-image>
                </div>
                <div class="book_action">
                  <button
                    class="plainBtn"
                    @click="goToOrderDetail(item[1].orderId)"
                  >
                    订单详情
                  </button>
                  <br />
                  <button
                    @click="cui(item[1].orderId)"
                    class="plainBtn"
                  >
                    催一下
                  </button>

                  <br />
                  <button
                    @click="kefu(item[1].orderId)"
                    class="plainBtn"
                  >
                    联系客服
                  </button>
                  <br />
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="待收货" name="2">
          <div class="tab_box" v-show="statusnum < 1">
            <p class="noMesInfo" v-show="true">暂无待收货订单</p>
          </div>
          <div class="tab_box" v-show="statusnum > 0">
            <el-scrollbar
              style="height:500px;width:1060px"
            
            >
              <div
                class="order_list"
                v-for="item in orderlist2"
                :key="item[1].orderId"
               
              >
                <div
                  class="order_summary"
                  style="
                   border-bottom: 1px solid #e7e7e7
                  "
                >
                  <p class="order_status">
                   待收货
                  </p>
                  <p class="caption-info">
                    {{ item[1].createTime }}
                    <span>|</span>
                    {{ item[1].receiveName }}
                    <span>|</span>
                    订单编号:{{ item[1].orderId }}

                    <span style="float: right"
                      >实付金额：
                      <span class="money">{{
                        item[1].payment
                      }}</span
                      >元</span
                    >
                  </p>
                </div>
                <div class="bookInfo">
                  <div
                    class="book_item"
                    v-for="i in item[0]"
                    :key="i.orderId"
                  >
                    <el-image
                      class="bookImg"
                      :src=" i.bookImg"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book_action">
                    <button
                      class="plainBtn"
                      @click="goToOrderDetail(item[1].orderId)"
                    >
                      订单详情
                    </button>
                    <br />
                    <button
                      class="plainBtn"
                      @click="queren(item[1])"
                    >
                      确认收货
                    </button>
                    <br />
                    <button
                      @click="kefu(item[1].orderId)"
                      class="plainBtn"
                    >
                      联系客服
                    </button>
                    <br />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="3">
          <el-switch
            style="display: block"
            v-model="order_type"
            active-color="#13ce66"
            inactive-color="#007ACC"
            active-text="图书订单"
            inactive-text="充值订单"
          >
          </el-switch>
          <div class="tab_box" v-show="statusnum< 1">
            <p class="noMesInfo" v-show="true">您还未有完成订单</p>
          </div>
          <div class="tab_box" v-show="statusnum > 0">
            <el-scrollbar
              style="height:630px;width:1060px"
            
            >
              <div
                class="order_list"
                v-for="item in orderlist"
                :key="item.orderId"
                v-show="
                 order_type == false
                "
              >
                <div
                  class="order_summary"
                
                >
                  <span class="order_status">已完成</span>
                  <span  style="float: right">
                    <button
                      class="plainBtn"
                      @click="kefu(item.orderId)"
                    >
                      联系客服
                    </button></span
                  >
                  <p class="caption-info">
                    {{ item.createTime }}
                    <span>|</span>
                    {{ item.receiveName }}
                    <span>|</span>
                    订单编号:{{ item.orderId }}

                    <span style="float: right"
                      >实付金额：
                      <span class="money">{{
                        item.payment
                      }}</span
                      >元</span
                    >
                  </p>
                </div>
           
              </div>

              <div
                class="order_list"
                v-for="item in orderlist2"
                :key="item[1].orderId"
                v-show="
               order_type == true
                "
              >
                <div
                  class="order_summary"
                  style="
                   border-bottom: 1px solid #e7e7e7
                  "
                >
                  <span class="order_status"
                    >已完成</span
                  >
                
                  <p class="caption-info">
                    {{ item[1].createTime }}
                    <span>|</span>
                    {{ item[1].receiveName }}
                    <span>|</span>
                    订单编号:{{ item[1].orderId }}

                    <span style="float: right"
                      >实付金额：
                      <span class="money">{{
                        item[1].payment
                      }}</span
                      >元</span
                    >
                  </p>
                </div>
                <div class="bookInfo" >
                  <div
                    class="book_item"
                    v-for="i in item[0]"
                    :key="i.orderId"
                  >
                    <el-image
                      class="bookImg"
                      :src=" i.bookImg"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="book_action">
                    <button
                      class="plainBtn"
                      @click="goToOrderDetail(item[1].orderId)"
                    >
                      订单详情
                    </button>
                    <br />
                    <button
                      @click="shouhou(item[1].orderId)"
                      class="plainBtn"
                    >
                      申请售后
                    </button>
                    <br />
                    <button
                      @click="kefu(item[1].orderId)"
                      class="plainBtn"
                    >
                      联系客服
                    </button>
                    <br />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div style="margin: 10px 0px 20px;width: 100%" v-show="total > 0">
      <div class="block" style="float: right">
        <el-pagination
          @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3,5, 10, 20, 50]"
          :page-size="page_size"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 选择支付方式 -->
    <el-dialog
      title="选择支付方式"
      :visible.sync="dialogVisible_pay1"
      width="30%"
      height="600px"
      class="dindan_pay"
    >
     <el-dialog
        title="余额支付"
        :visible.sync="showKeyboard"
        append-to-body
        width="20%"
      >
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
          autocomplete="off"
        ></el-input>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showKeyboard = false">取 消</el-button>
          <el-button type="primary" @click="yue_qd()">确 定</el-button>
        </div>
      </el-dialog>
      <a @click="zfb" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="../../assets/zfb.jpg"
          alt=""
        />
        <p>支付宝</p>
      </a>
      <a @click="ye" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="https://storage.360buyimg.com/payment-assets/sdk/bank/XJKCONSUME.png"
          alt=""
        />
        <p>余额支付</p>
      </a>
      <a @click="wx" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="//storage.360buyimg.com/payment-assets/sdk/bank/PAY-WEIXIN.png"
          alt=""
        />
        <p>微信支付</p>
      </a>
      <a slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_pay1 = false">取 消</el-button>
      </a>
    </el-dialog>
  </div>
</template>
<script>
// <!--  reqUserGetOrderList-->
import axios from "axios";
// <!--用户订单页面-->
export default {
  name: "UserOrder",
  data() {
    return {
       showKeyboard: false,
      password: "",
      dialogVisible_pay1: false, //选择支付弹窗
      activeName: "4", //tab切换
      currentPage: 1,
      page_size: 3,
      total: 20,
      loading: false,
      order_type: false, //显示订单类型
      pay_orderId: "", //立即支付的订单Id
      pay_type: "", //立即支付的订单类型

      orderList: [
        //用户全部订单3 余额订单2 图书订单1
      ],
      orderlist: [], //充值订单2
      orderlist2: [], //图书订单2
      List_cz: [], //充值订单
      List_book: [], //图书订单
      statusnum:0,
      orderStatus: "",
      beUserDelete: false,
    };
  },

  methods: {
   handleSizeChange(val) {
        ;
        this.page_size=val
        this.getorder()
      },
      handleCurrentChange(val) {
        ;
        this.currentPage=val
         this.getorder()
      },
   async getorder() {
     this.loading = true;
      let Type = 1;
      if (this.activeName == 1 || this.activeName == 2) {
        Type = 1;
      } else if(this.activeName == 4){
         if (this.order_type == true) Type = 3;
        else Type = 4;
       
      }else if(this.activeName ==3){
        if (this.order_type == true) Type = 1;
        else Type = 2;
      }else if(this.activeName ==0){
         if (this.order_type == true) Type = 1;
        else Type = 2;
      }
      
       ;
        ;
        this.statusnum=0
         
    await  axios
        .post("/fl-bookOrder/searchOrderByUserIdAndStatusType", {
          orderType: Type,
          page:this.currentPage ,
          pageSize: this.page_size,
          statusType: this.activeName,
          userId: this.$store.getters.getUser.userId,
        })
        
        .then((res) => {
          ;
     this.loading = false;
          if (this.activeName == 1 || this.activeName == 2) {
           
            this.orderlist2 = res.data.data.orderDetail;
            ;
            this.statusnum=res.data.data.total
            this.total=res.data.data.total
          } else {
            
            if (this.order_type) {
             
                 this.orderlist2= res.data.data.orderDetail ;
                  this.statusnum=res.data.data.total
                  this.total=res.data.data.total
               
            } else {
             this.orderlist = res.data.data.records
             this.statusnum=res.data.data.total
             this.total=res.data.data.total
            }
          }
       
         
        
        });
    },
    cui(orderId) {
      this.$notify.info({
        title: "消息",
        message: "催单暂时还未开通",
      });
    },
    shouhou(orderId) {
      this.$notify.info({
        title: "消息",
        message: "售后模块暂时还未开通",
      });
    },
    // handleClick(tab, event) {
    //     ;
    //     switch (this.activeName) {
    //         case "first":
    //             this.orderStatus="";
    //             this.beUserDelete=false;
    //             break;
    //         case "third":
    //             this.orderStatus="已发货";
    //             this.beUserDelete=false;
    //             break;
    //         case "four":
    //             this.orderStatus="";
    //             this.beUserDelete=true;
    //             break;
    //     }
    //     
    //     this.getOrderList(1,5);
    // },

    // 跳转到订单明细页面
    goToOrderDetail(id) {
      ;

      ;
      this.$router.push({
        path: "/userhome/dindan_xq",
        query: {
          id: id,
        },
      });
    },

    pj(orderId) {
      this.$notify.info({
        title: "消息",
        message: "本网站评价板块暂未开通",
      });
    },
    kefu(orderId) {
      //联系客服
      this.$notify.info({
        title: "消息",
        message: "本网站客服板块暂未开通",
      });
      window.open(
        "http://1.116.182.96:8035/im/text/1okd5i.html",
        "newwindow",
        "height=500, width=700px, top=200,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
      );
    },
    queren(order) {
      //确认收货
      this.$confirm("是否确认收货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("orderId", order.orderId);
          axios.post("/fl-bookOrder/acknowledgeReceipt", params).then((res) => {
            ;
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
              
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消确认收货",
          });
        });
    },
    //筛选
    saixuan() {
      for (let item of this.orderList) {
        if (item.length < 2) {
          this.List_cz.push(item);
        } else if (item.length > 1) {
          this.List_book.push(item);
        }
      }
    },
    //得到订单列表
    getOrderList() {
      // this.orderList = this.$store.getters.getuser_order;
      // ;
      // this.saixuan();
    },
    // getstatus_0() {
    //   //统计用户订单各状态数量
    //   for (let item of this.orderList) {
    //     this.statusList.all++;
    //     if (item[item.length - 1].orderStatus == 0) {
    //       this.statusList.dzf++;
    //     } else if (item[item.length - 1].orderStatus == 1) {
    //       this.statusList.dfh++;
    //     } else if (item[item.length - 1].orderStatus == 2) {
    //       this.statusList.dsh++;
    //     } else if (item[item.length - 1].orderStatus == 3) {
    //       this.statusList.wc++;
    //     }
    //   }
    //   this.$store.commit("SET_dd", this.statusList);
    //   ;
    // },
    pay(orderId, index) {
      //订单立即支付
      ;
      ;
      if (index != 0) {
        this.dialogVisible_pay1 = true;
        this.pay_orderId = orderId;
        this.pay_type = index;
      }
    },
    zfb() {
      ;
      console.log(
        "/aliPay/pcPay?orderId=" +
          this.pay_orderId +
          "&type=" +
          this.pay_type +
          ", _parent"
      );
      this.$message({
        message: "下单成功，正在为您跳转到支付页面",
        type: "success",
      });

      window.open(
        "https://end.flya.top/aliPay/pcPay?orderId=" +
          this.pay_orderId +
          "&type=" +
          this.pay_type
      );
      // window.showModalDialog('/aliPay/pcPay?orderId='+this.orderId,window)

      //根据订单id查询订单支付状态
      //如果未支付则让页面跳转支付页面

      //查询用户支付结果
      //     //成功则router跳转到订单详情页面
    },
    ye() {
      ;

      if (this.pay_type == 2) {
        this.$notify({
          title: "警告",
          message: "您这是余额充值余额,不好意思,这里禁止套娃",
          type: "warning",
        });
      } else {
        if (this.$store.getters.getUser.accountBalance < this.price) {
          this.$confirm("您的余额不足是否充值?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$router.push("/pay");
              this.$message({
                type: "success",
                message: "请充值!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
           this.showKeyboard = true;
         
        }
      }
    },
    yue_qd() {
       let params = new URLSearchParams();
          params.append("orderId", this.pay_orderId);
          params.append("userId", this.$store.getters.getUser.userId);
          params.append("payPassword", this.password);
          axios
            .post("/fl-bookOrder/payForOrderByBalance", params)
            .then((res) => {
              ;
              if (res.data.code == 200) {
                this.$message({
                  message: "支付成功",
                  type: "success",
                });
                // //支付成功刷新列表
                // for (let item of this.orderList) {
                //   if (item[item.length - 1].orderId == this.pay_orderId) {
                //     item[item.length - 1].orderStatus = 1;
                //   }
                // }
                // this.$store.commit("SET_ORDER", this.orderList);
                this.$router.go(0);
              } else if (res.data.code == 404) {
                if(this.$store.getters.getUser.accountBalance < this.price){
                  this.$confirm("您的余额不足是否充值?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$router.push("/pay");
                    this.$message({
                      type: "success",
                      message: "请充值!",
                    });
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消",
                    });
                  });
                }else{
                  this.$message({
                    message:'支付密码输入错误',
                    type: "warning",
                  });
                }
              }
            });
    },
    wx() {
      ;
      this.$notify({
        title: "警告",
        message: "暂时还未开通微信支付,后续添加,敬请期待",
        type: "warning",
      });
    },
  },
  watch: {
   order_type() {
      this.getorder();
    },
  activeName(){
    this.getorder();
  }
  },
  created() {
    this.getOrderList();
    ;

    // this.getstatus_0();

    if (this.$route.fullPath == "/userhome/user_dindan") {
    } else {
      this.activeName = this.$route.query.activeName;
    }
    this.getorder();
    ;
  },
};
</script>

<style scoped>
.content {
  width: 60%;
  background-color: white;
  margin-left: 20px;
}
h1 {
  color: #757575;
  font-family: 新宋体;
}
.box_info_dd {
  width: 90%;
  left: 20px;
}
.el-tabs__item {
  height: 30px;
  line-height: 50px;
  font-size: 16px;
  color: #757575;
}
.tab_box {
  width: 100%;
}

.order_list {
  border: 1px #f3f0e9 solid;
  margin: 12px auto;
  width: 1000px;

  max-height: 220px;
  line-height: 35px;
  border: 1px solid #cacaca;
  padding: 15px 25px;
}
.order_summary {
  width: 95%;
  height: 70px;
  padding: 15px 25px;
}
.order_status {
  font-size: 22px;
  color: #757575;
}
.caption-info {
  font-size: 14px;
  color: #757575;
}
.money {
  font-size: 23px;
  color: black;
}
.bookInfo {
  width: 100%;
  height: 200px;
}
.book_item {
  height: 105px;
  float: left;
}
.bookImg {
  float: left;

  margin-top: 10px;
  width: 60px;
  height: 85px;
  margin-right: 40px;
}
.book_detail {
  margin: 25px 20px;
  height: 55px;
  line-height: 27.5px;
  float: left;
  font-size: 14px;
}
.book_action {
  width: 250px;
  font-size: 14px;
  color: #757575;
  float: right;
  height: 105px;
  margin-top: 14px;
}
.plainBtn {
  width: 120px;
  height: 30px;
  margin: 2px 0px;
  background-color: white;
  color: #757575;
  border: 1px #cacaca solid;
  float: right;
}
.plainBtn:hover {
  border: 1px #393a42 solid;
  background-color: #e7e7e7;
}
.noMesInfo {
  text-align: center;
  font-size: 18px;
  color: #757575;
  line-height: 60px;
}
.block {
  margin-right: 12%;
}
</style>
